<template>
   <div class="login">
      <div class="login-box">
            <div class="l-b-title">好融艺CRM管理中心</div>
            <div class="l-b-box">
              <div class="box-account pub">
                <img src="static/img/crm-account.png"/>
                <input class="acc pub-item" type="text" placeholder="账户名" v-model="account"></input>
              </div>
              <div class="box-password pub">
                <img src="static/img/crm-password.png">
                <input class="pass pub-item" type="password" placeholder="账户密码" v-model="password"></input>
              </div>
              <div class="box-auth">
                <img  :src="codeImg" @click="updateCode()">
                <input class="auth" type="text" placeholder="请输入验证码" v-model="authCode" ></input>
              </div>
            </div>
            <el-button class="login-btn"  type="primary" :loading="loading" @click="handleLogin()">登录</el-button>
      </div>
   </div>
</template>

<script>
    export default {
        name: "login",
        data(){
          return{
            loading:false,
            account:'15002827630',
            password:'',
            codeImg:'',
            authCode:''
          }
        },
        mounted(){
          this.$api.getImageCode().then((res)=>{
            this.codeImg=res.code
          },(err)=>{
            this.$message.error(err.msg)
          })
        },
        methods:{
          handleLogin(){
            let params={
               mobile:this.account,
               password:this.password,
               code:this.authCode
            }

            if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.account))){
              this.$message.error("请输入正确手机账号")
              return
            }else{
              if(this.password){
                if(this.authCode){
                   this.$api.login(params).then((res)=>{
                       this.$message.success("登录成功")
                       localStorage.setItem("token",res.token)
                       setTimeout(()=>{
                         this.$router.push({path:'/',query:{}})
                       },1000)
                   },(err)=>{
                     this.$message.error(err.msg)
                   })
                }else {
                  this.$message.error("请输入图形验证码")
                }
              }else{
                this.$message.error("请输入密码")
              }
            }
          },
          //更新验证码
          updateCode(){
            this.$api.getImageCode().then((res)=>{
              this.codeImg=res.code
            },(err)=>{
              this.$message.error(err.msg)
            })
          }
        }
    }
</script>

<style scoped lang="less">
   .login /deep/ .el-button--primary{
     width: 220px;
     height: 35px;
     line-height: 35px;
     padding: 0;
   }
   .login{
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     width: 100%;
     background: url("../../../static/img/crmBg.jpg");
     background-size: 100% 100%;
      .login-box{
        width: 342px;
        height: 398px;
        background-color: #ffffff;
        position: absolute;
        top: 50%;
        right: 140px;
        transform: translate(0,-50%);
        .l-b-title{
          font-size: 18px;
          color: #1866FF;
          text-align: center;
          margin-top: 51px;
        }
        .l-b-box{
          position: absolute;
          top: 114px;
          left: 50%;
          transform: translate(-50%,0);
          .pub{
            position: relative;
            margin-top: 15px;
              img{
                display: block;
                position: absolute;
                width: 13px;
                height: 13px;
                top: 50%;
                left: 14px;
                transform: translate(0,-50%);
              }
            .pub-item{
              width: 220px;
              height: 35px;
              box-sizing: border-box;
              padding: 5px 20px 5px 40px;
              border-radius: 6px;
              border: solid 1px #DFE3E6;
              font-size: 12px;
            }
          }
          .box-account{
            margin: 0;
          }
          .box-auth{
            position: relative;
            margin-top: 15px;
            img{
              width: 50px;
              height: 21px;
              display: block;
              position: absolute;
              right: 7px;
              top: 50%;
              transform: translate(0,-50%);
              cursor: pointer;
            }
            .auth{
              width: 220px;
              height: 35px;
              box-sizing: border-box;
              padding: 5px 65px 5px 14px;
              border-radius: 6px;
              border: solid 1px #DFE3E6;
              font-size: 12px;
            }
          }
        }
      }
     .login-btn{
       position: absolute;
       bottom: 90px;
       left: 50%;
       transform: translate(-50%,0);
     }
   }
</style>
